<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 300px;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            margin: 100px auto;
            transition: all .2s linear;
        }

        ul:hover {
            width: 400px;
            height: 400px;
        }

        li {
            width: 14.5%;
            height: 14.5%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        li:hover {
            transform: scale(1.2);
        }

        div {
            width: 300px;
            margin: 20px auto;
            text-align: center;
            letter-spacing: 5px;

        }

        p {
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <button onclick="listLi()">换一换</button>
    </div>
    <div>
        <p></p>
    </div>
    <ul></ul>
    <script>
        /* 
    页面加载完成后 创建36个li标签 每个标签都有一个随机的成语文字

    span标签中会有一个随机成语  p标签清空

    再换一下 li重新渲染一遍 每个标签有新的随即成语文字
    span标签中会有一个随机成语 p标签清空

    当点击li 获取li中文字 现在是p标签中 p标签内文字如果有四个字判断跟span标签内的内容是否一致

    span标签中的随机成语 p标签清空 li标签 每个标签都有一个随机的成语文字

        */

        var str = "不吐不快、海阔天空、情非得已、满腹经纶、兵临城下、春暖花开、插翅难逃、黄道吉日、天下无双";

        var reg = /、/g; // 得到一个没有顿号的成语文字
        var str2 = str.replace(reg, '');
        // console.log(str2) 输出所有成语
        // console.log(str2.length) 成语长度

        var arrcheng = str.split(reg);// 分割
        // console.log(arrcheng); 得到九个成语数组

        // 获取一个 0-35之间随机打乱的数组（0-35）
        function mathArr() {
            var arr = [];
            for (var i = 0; i < 1000; i++) {
                var num = Math.floor(Math.random() * str2.length)
                if (arr.indexOf(num) == -1) {
                    arr.push(num);
                }
                if (arr.length == str2.length) return arr;
            }
        }

        // 随机的一个颜色
        function rgb() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return `rgb(${r},${g},${b})`;
        }
        var ul = document.querySelector('ul');
        var span = document.querySelector('span');
        var p = document.querySelector('p');
        // console.log(p);
        listLi()

        function listLi() {
            var arr = mathArr();
            // console.log(arr);// 36个随机数
            var str3 = '';
            for (var i = 0; i < arr.length; i++) {
                str3 += `<li style="box-shadow: 0 0 4px 0 ${rgb()};">${str2[arr[i]]}</li>`
            }
            ul.innerHTML = str3;

            var n = Math.floor(Math.random() * arrcheng.length);
            span.innerHTML = arrcheng[n]; // 上面的四字随机

            p.innerHTML = ""

            var lis = document.querySelectorAll('li');
            for (var k = 0; k < lis.length; k++) {
                lis[k].onclick = shi;
            }


        }

        function shi() {
            p.innerHTML += this.innerHTML;
            setTimeout(function () {
                if (p.innerHTML.length == 4 && p.innerHTML === span.innerHTML) {
                    alert('成功')
                    listLi()
                } else if (p.innerHTML.length == 4) {
                    alert('错误')
                    listLi()
                }
            }, 10)
        }
    </script>
</body>

</html>